<template>
    <div id="seaDistanceChart" :style="{height:hght,width:wid}"></div>
</template>

<script>
import * as echarts from 'echarts';
import myTheme from '@/assets/theme/myTheme.json'
export default {
    name: 'SeaDistanceChart',
    props : {
        theme : {
            type : String,
            default : "light"
        },
        wid: {
            type: String,
            default: '400px'
        },
        hght: {
            type: String,
            default: '400px'
        },
    },
    data () {
        return {
            // 实时数据数组
            date: [],
            yieldRateGround: [],
            yieldRateLevel: [],
            yieldIndex: [],
            // 折线图echarts初始化选项
            echartsOption: {
                legend: {
                    data: ['距离'], // 纵坐标
                },
                xAxis: {
                    name: '时间', // 横坐标
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 9
                    },
                    type: 'category',
                    boundaryGap: false,
                    data: this.date,	// 绑定实时数据数组
                },
                yAxis: {
                        name: '',
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 13
                    },
                    type: 'value',
                    scale: true,
                    boundaryGap: ['0', '1'],
                    axisLabel: {
                        interval: 0,
                        rotate:40,
                        formatter: '{value} Km',
                        fontSize: 9
                    },
                    min: 0
                },
                tooltip: {
                    trigger: 'axis',
                },
                series: [
                    {
                        name:'距离海底',
                        type:'line',
                        areaStyle: {},
                        smooth: true,
                        data: this.yieldRateGround,	// 绑定实时数据数组
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        fontSize: 12,
                                        color: "DeepSkyBlue" //在这里修改tooltip的颜色
                                    },
                                    formatter: (params) => {
                                        // console.log(params)
                                        // console.log(this.yieldRate.length)
                                        if (this.yieldRateGround.length - 1 == params.dataIndex) {
                                            return params.value
                                        } else {
                                            return ""
                                        }
                                    },
                                },
                            }
                        },
                    },
                    {
                        name:'距离海平面',
                        type:'line',
                        areaStyle: {},
                        smooth: true,
                        data: this.yieldRateLevel,	// 绑定实时数据数组
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        fontSize: 12,
                                        color: "DeepSkyBlue"
                                    },
                                    formatter: (params) => {
                                        // console.log(params)
                                        // console.log(this.yieldRate.length)
                                        if (this.yieldRateLevel.length - 1 == params.dataIndex) {
                                            return params.value
                                        } else {
                                            return ""
                                        }
                                    },
                                },
                            }
                        },
                    }
                ]
            }
        }
    },
    mounted () {
        this.$echarts.registerTheme('myTheme', myTheme)
        this.seaDistanceChart = echarts.init(document.getElementById('seaDistanceChart'), this.theme);	// 初始化echarts, theme为light
        this.seaDistanceChart.setOption(this.echartsOption);	// echarts设置初始化选项
        // setInterval(this.testData, 3000);	// 测试用函数，之后替换成下面的内容_每三秒更新实时数据到折线图
        setInterval(this.addData, 3000);	// 每三秒更新实时数据到折线图
    },
    methods: {
        // 获取当前时间
        getTime : function() {
            var ts = arguments[0] || 0;
            var t, h, i, s;
            t = ts ? new Date(ts * 1000) : new Date();
            h = t.getHours();
            i = t.getMinutes();
            s = t.getSeconds();
            // 定义时间格式
            return (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
        },
        // 添加实时数据
        addData : function() {
            // 从接口获取数据并添加到数组
            this.$axios.get(this.GLOBAL.serverIp + '/api/seaGroundDistance/').then((res) => {
                this.yieldRateGround.push((res.data.groundDistance * 1).toFixed(3));
                this.date.push(this.getTime(Math.round(new Date().getTime() / 1000)));
                // 重新将数组赋值给echarts选项
                this.echartsOption.xAxis.data = this.date;
                this.echartsOption.series[0].data = this.yieldRateGround;
                this.seaDistanceChart.setOption(this.echartsOption);
            });
            // 从接口获取数据并添加到数组
            this.$axios.get(this.GLOBAL.serverIp + '/api/seaLevelDistance/').then((res) => {
                this.yieldRateLevel.push((res.data.levelDistance * 1).toFixed(3));
                this.date.push(this.getTime(Math.round(new Date().getTime() / 1000)));
                // 重新将数组赋值给echarts选项
                this.echartsOption.xAxis.data = this.date;
                this.echartsOption.series[1].data = this.yieldRateLevel;
                this.seaDistanceChart.setOption(this.echartsOption);
            });
        },
        testData : function() {
            this.yieldRateGround.push(((Math.random() * 100) + 2000).toFixed(3));
            this.date.push(this.getTime(Math.round(new Date().getTime() / 1000)));
            // 重新将数组赋值给echarts选项
            this.echartsOption.xAxis.data = this.date;
            this.echartsOption.series[0].data = this.yieldRateGround;
            this.seaDistanceChart.setOption(this.echartsOption);

            this.yieldRateLevel.push(((Math.random() * 100) + 1000).toFixed(3));
            this.date.push(this.getTime(Math.round(new Date().getTime() / 1000)));
            // 重新将数组赋值给echarts选项
            this.echartsOption.xAxis.data = this.date;
            this.echartsOption.series[1].data = this.yieldRateLevel;
            this.seaDistanceChart.setOption(this.echartsOption);
        }
    }
}
</script>

<style>
/*设定宽高，不然超出windows会显示不出来*/
#seaDistanceChart{
    width: 100%;
    height: 400px;
    margin: 0 auto;
}
</style>
